<template>
  <div style="margin: 20px 20px">
    <el-tree
      :data="data"
      show-checkbox
      default-expand-all
      node-key="id"
      ref="tree"
      highlight-current
      :props="defaultProps"
    >
    </el-tree>
    <el-button :disabled="saveBtnDisabled" type="primary" @click="save"
      >保存</el-button
    >
  </div>
</template>
<script>

export default {
  data() {
    return {
      saveBtnDisabled: false,
      data: [],
      defaultProps: {
        children: "children",
        label: "name",
      },
      roleId: "",
    };
  },
  // 监听器
  watch: {
    $route(to, from) {
      console.log("路由变化......");
      console.log(to);
      console.log(from);
      this.init();
    },
  },

  created() {
    this.init();
  },
  methods: {
    init() {},
    fetchDataById(roleId) {},
    //把json数据转成string再转成对象，根据Key获取value数据
    getJsonToList(list, jsonList) {},

    getCheckedNodes() {
      console.log(this.$refs.tree.getCheckedNodes());
    },
    getCheckedKeys() {
      console.log(this.$refs.tree.getCheckedKeys());
    },

    setCheckedKeys(list) {
      this.$refs.tree.setCheckedKeys(list);
    },

    save() {},
  },
};
</script>
